import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Card, Button, Icon, List, Modal, Popconfirm } from 'antd';
import Ellipsis from 'components/Ellipsis';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import styles from './ProjectManage.less';
import ProjectForm from './ProjectForm';
import VersionForm from './VersionForm';
import _ from 'lodash';


@connect(({ project, version, loading }) => ({
  list: project.list,
  currentProject: project.currentProject,
  status: project.status,
  formModalVisible: project.formModalVisible,
  versionFormVisible: version.visible,
  loading: loading.models.testcenter_project
}))
export default class ProjectManage extends PureComponent {

  state = {
    images : ['Unity3D', 'LaserBox', 'mBlock', 'MakeX', 'MBextend', 'MBclassroom', 'MBforum', 'Education', 'Neuron','mBlockAPP','MakeblockForiOS','MakeblockForAndroid']
  }

  componentDidMount() {
    this.props.dispatch({
      type: 'project/list'
    });

    this.props.dispatch({
      type: 'jira/fetchJiraData'
    });

  }

  showProjectCreateModal() {
    this.props.dispatch({
      type: 'project/showCreateFormModal'
    })
  }

  showProjectEditModal(projectId) {
    this.props.dispatch({
      type: 'project/showEditFormModal',
      payload: projectId
    })
  }

  showProjectCheckModal(projectId) {
    this.props.dispatch({
      type: 'project/showCheckFormModal',
      payload: projectId
    })
  }

  deleteProject(projectId) {
    this.props.dispatch({
      type: 'project/delete',
      payload: projectId
    })
  }

  showVersionsListModal(item) {
    this.props.dispatch({
      type:'version/queryVersionList',
      payload:item.name
    })
    this.props.dispatch({
      type: 'version/showVersionsListModal',
      payload: item.id
    })
  }

  render() {
    const {
      list,
      loading
    } = this.props;


    const avatars = {
  
      Unity3D: 'https://s2.ax1x.com/2019/01/19/kCel7D.png', //Unity3D 11105
      LaserBox: 'https://s2.ax1x.com/2019/01/19/kCe8tH.png', //LaserBox 10907
      mBlock: 'https://s2.ax1x.com/2019/01/19/kCeMnK.png', //mBlock  10208
      MakeX: 'https://s2.ax1x.com/2019/01/19/kCen6x.png', //MakeX  10700
      MBextend: 'https://s2.ax1x.com/2019/01/19/kCeuX6.png', //MBextend  11219 //需要修改后台
      MBclassroom: 'https://s2.ax1x.com/2019/01/19/kCe3Ae.png', //MBclassroom 11104
      MBforum: 'https://s2.ax1x.com/2019/01/19/kCeGhd.png', //MBforum 11107
      Education: 'https://s2.ax1x.com/2019/01/19/kCeQ0O.png', //Education 10209  /需要修改后台
      Neuron: 'https://s2.ax1x.com/2019/01/19/kCet1I.png', //Neuron 10300
      mBlockAPP: 'https://s2.ax1x.com/2019/03/04/kOzQTx.png', //mBlockAPP 11106
      MakeblockForiOS: 'https://s2.ax1x.com/2019/01/19/kCeY9A.png', //MakeblockForiOS 10100
      MakeblockForAndroid:' https://s2.ax1x.com/2019/01/19/kCeNct.png'  //MakeblockForAndroid 10204
    };

    const content = (
      <div className={styles.pageHeaderContent}>
        <p>
          | 这里展示公司目前所有在研项目 <br />
          <br />
          | 管理员可以创建/删除/更新项目信息
        </p>
      </div>
    );

    const extraContent = (
      <div className={styles.extraImg}>
        <img
          alt="这是一个标题"
          // src="https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png"
          src="../dist/public/src/assets/panda.png"
        />
      </div>
    );

    return (
      <PageHeaderLayout title="项目管理" content={content} > {/*extraContent={extraContent}*/}
        <div className={styles.cardList}>
          <List
            rowKey="id"
            loading={loading}
            grid={{ gutter: 24, lg: 3, md: 2, sm: 1, xs: 1 }}
            dataSource={['', ...list]}
            renderItem={item =>
              item ? (
                <List.Item key={item.id}>
                  <Card
                    hoverable
                    className={styles.card}
                    actions={[
                      <Icon type="edit" theme="twoTone" onClick={() => this.showProjectEditModal(item.id)} />,
                      <Popconfirm title={`确定删除项目"${item.name}"吗?`} onConfirm={() => this.deleteProject(item.id)}>
                        <Icon type="delete" theme="twoTone" />
                      </Popconfirm>,
                      ,
                      <a onClick={() => this.showVersionsListModal(item)}>管理版本</a>]}
                  >
                    <Card.Meta
                      onClick={() => this.showProjectCheckModal(item.id)}
                      avatar={<img alt="" className={styles.cardAvatar}
                        src={ this.state.images.indexOf(item.name) >= 0 ? avatars[item.name ]: `https://s2.ax1x.com/2019/01/22/kFYsEQ.png`}
                        />}
                      title={<a onClick={() => this.showProjectCheckModal(item.id)}>{item.name}</a>}
                      description={
                        <Ellipsis className={styles.item} lines={3} onClick={() => this.showProjectCheckModal(item.id)}>
                          {item.description}
                        </Ellipsis>
                      }
                    />
                  </Card>
                </List.Item>
              ) : (
                  <List.Item>
                    <Button
                      type="dashed"
                      className={styles.newButton}
                      onClick={() => this.showProjectCreateModal()}
                    >
                      <Icon type="plus" /> 新增项目
                    </Button>
                    {this.props.formModalVisible? <ProjectForm 
                      visible={this.props.formModalVisible}
                      data = {this.props.status == 1 ? {} : this.props.currentProject}
                    /> : null}
                    {<VersionForm
                      visible={this.props.versionFormVisible}
                    /> }
                  </List.Item>
                )
            }
          />
        </div>
      </PageHeaderLayout>
    );
  }
}


